<template>
  <div id="app">
    <el-container>
      <el-header>
        <div class="logo">
          <img src="./assets/logo.png" alt>
        </div>
        <el-menu
          :default-active="defaultActive"
          class="el-menu-demo"
          mode="horizontal"
          :router="router"
        >
          <el-menu-item index="/">
            首页
          </el-menu-item>
          <el-menu-item index="/news">
            新闻资讯
          </el-menu-item>
          <el-menu-item index="/product">
            企业公告
          </el-menu-item>
          <el-menu-item>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                欢迎,<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="editInfo">
                  修改信息
                </el-dropdown-item>
                <el-dropdown-item command="resetPasswd">
                  重置密码
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      router: true,
      defaultActive: '/',
      isShow: false
    }
  },
  methods: {
    handleCommand(command) {
      if (command === 'logout') {
        this.logout()
      }
      if (command === 'resetPasswd') {
        this.$prompt('请输入新密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'password'
        }).then(({ value }) => {
          if (value.trim().length === 0) {
            this.$message.error('请输入新密码')
            return
          }

          var data = {}
          data.password = value
          const token = localStorage.getItem('token')
          this.$axios
            .post(
              '/gapi/member/resetPasswd',
              data,
              {
                headers: {
                  'shopapi-token': token
                }
              }
            )
            .then((res) => {
              if (res.data.code === 200) {
                // 001 为成功, 更新vuex购物车状态
                this.notifySucceed('修改成功')
              } else if (res.data.code === 600) {
                localStorage.removeItem('token')
                localStorage.removeItem('user')
              } else {
                // 提示失败信息
                this.notifyError(res.data.msg)
              }
            })
            .catch((err) => {
              return Promise.reject(err)
            })
        })
      }
      if (command === 'editInfo') {
        this.showEditInfoDialog()
      }
    }
  }
}
</script>

<style lang="scss">
    * {
        padding: 0;
        margin: 0;
    }

    html,
    body {
        height: 100%;
    }

    #app {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
    }

    .el-header {
        display: flex;
        justify-content: space-between;
        align-content: center;
        width: 1240px;
        margin: 0 auto;
        //background-color: #fff;

        .logo {
            width: 80px;
            padding: 10px;

            img {
                width: 100%;
                line-height: 60px;
            }
        }
    }

    .el-main {
        padding: 0 !important;
    }
    .page{
        padding: 20px;
    }

    .footer {
        width: 100%;
        height: 216px;
        overflow: hidden;
        background-color: #14679f;

        &-content {
            width: 1240px;
            margin: 0 auto;
            padding-top: 20px;
            display: flex;
            justify-content: space-between;

            .content-nav {
                display: flex;
                justify-content: space-around;

                li {
                    display: flex;
                    flex-direction: column;
                    padding: 0 20px;
                    //justify-content: center;
                    align-items: flex-start;

                    p {
                        font-size: 20px;
                        color: #d4edff;
                        padding: 10px 0;
                    }

                    span {
                        color: #f7f7f7;
                        font-weight: 300;
                        padding: 5px 0;
                    }
                }
            }

            img {
                width: 170px;
                height: 170px;
                padding: 10px;
            }
        }

        .copyright {
            height: 30px;
            background: #125688;

            span {
                color: #fff;
                line-height: 30px;
            }
        }
    }
</style>
